.wok-ui-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1045;

  &>.wok-ui-drawer-content {
    background-color: white;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;

    &.top {
      top: 0;
      left: 0;
      right: 0;
      height: auto;
      max-height: 90%;
    }

    &.bottom {
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      max-height: 90%;
    }

    &.left {
      top: 0;
      bottom: 0;
      left: 0;
      width: 400px;
      max-width: 100%;
    }

    &.right {
      top: 0;
      bottom: 0;
      right: 0;
      width: 400px;
      max-width: 100%;
    }

    .header {
      padding: 1rem;
      line-height: 1em;
      display: flex;
      position: sticky;
      top: 0;
      font-weight: bold;
      z-index: 2;
      background-color: white;
      font-size: var(--size-text-lg);
      border-bottom: 1px solid var(--color-border);

      .wok-ui-heading {
        flex-grow: 1;
        min-width: 0;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .close {
        padding-left: 0.5em;
        font-size: 1.2rem;
        cursor: pointer;
      }
    }

    .body {
      padding: 1rem;
    }
  }
}

.wok-ui-drawer-lock-scroll {
  overflow: hidden;
}